<?php
require_once dirname(__FILE__) . '/../../../incls/php/dbutils.class.php';
require_once dirname(__FILE__) . '/../../../incls/php/miscutils.class.php';
require_once dirname(__FILE__) . '/../../../incls/php/config.php';
$myPdo = DbUtils::createPdoInst();
$page_id = MiscUtils::getParam('i', 0);
$tags = DbUtils::get($myPdo, TABLE_NAME_PREFIX_PLUGIN . 'art_tag', NULL, 't.order', 'ASC', NULL, NULL, NULL)->d;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
* {
  font-family: Trebuchet MS;
  font-size: 12px;
  padding: 0;
  margin: 0;
}
table.list {
  border-left: 1px solid #666;
  border-top: 1px solid #666;
  font-size: 12px;
  width: 500px;
}
table.list th.sort {
  text-align: left;
  height: 28px;
  background-color: #222;
  padding: 0 5px; 
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  font-weight: bold;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
}
table.list tr.rowodd td {
  padding: 0 5px;
  height: 25px;
  background-color: #eee;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  word-wrap: break-word;
  vertical-align: middle;
}
table.list tr.roweven td {
  padding: 0 5px;
  height: 25px;
  background-color: #fff;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  word-wrap: break-word;
  vertical-align: middle;
}
table.list tr.rowodd:hover td {
  background-color: #f4f3b2;
}
table.list tr.roweven:hover td {
  background-color: #f4f3b2;
}
table.list tr.none td {
  padding: 0 5px;
  height: 25px;
  background-color: #fff;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  word-wrap: break-word;
}
table.list tr.current td {
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  background-color: #ff8000;
  height: 25px;
  padding: 0 5px;
  word-wrap: break-word;
}
.chrome {
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.imgbtn {
  background-image: url(assets/imgs/add.png);
  background-repeat: no-repeat;
  background-position: 5px 2px;
  padding: 5px 5px 5px 30px;
  border: 1px solid #666;
  background-color: #fff;
  cursor: pointer;
  border-radius: 3px;
}
.imgbtn:hover {
  background-color: #eee;
}
.imgico {
  cursor: pointer;
}
</style>
</head>
<body>
<div class="chrome">
<button class="imgbtn" onclick="parent.location.href='http://<?php echo URL . "admin.php?i=$page_id&script=index_tag"; ?>';">New Tag</button>
</div>
<table id="pages" style="margin-top: 5px;" class="list chrome" cellpadding=0 cellspacing=0>
  <tr>
    <th class="sort">Tag Name</th>
    <th class="sort" style="width: 80px;"></th>
  </tr>
</table>
<div class="chrome" style="height: 200px;">&nbsp;</div>
<script type="text/javascript" src="../../../incls/js/pageutils.js"></script>
<script type="text/javascript" src="../../../libs/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../../incls/js/myutils.js"></script>
<script type="text/javascript">
  var _root = null;
  var _currentRow = null;
  var _options = [];
  var _count = 0;
  var _threadId = 0;
  
  $(function(){
    _root = PageUtils.getRoot(JSON.parse('<?php echo addslashes(json_encode($tags)); ?>'));
    setRoot('', false);
    document.body.onmouseup = function() {
      if (!_currentRow) {
        return;
      }
      $.ajax({
        type: 'POST',
        url: '<?php echo basename(__FILE__, '.php'); ?>.server.php',
        data: 'action=save&q=' + encodeURIComponent(JSON.stringify(_currentRow._node)),
        success: function(msg){
        }
      });
      _currentRow = null;
      setRoot('', false);
    };
  });

  function setRoot(prefix, is_child) {
    $('#pages').find('tr:gt(0)').remove();
    _setRoot(_root, $('#pages')[0], prefix, is_child);
  }

  function _setRoot(node, table, prefix, is_child) {
    var tr, td, elm;
    if (node.id != 0) {
      tr = table.insertRow(-1);
      tr.className = (tr.rowIndex % 2 == 0) ? 'rowodd' : 'roweven';
      tr._node = node;
      if (_currentRow && _currentRow._node &&_currentRow._node.id == node.id || is_child) {
        tr.className = 'current';
        is_child = true;
        if (_currentRow && _currentRow._node &&_currentRow._node.id == node.id) {
          _currentRow = tr;
          tr.onmouseover = function() {
            transform();
          }
        }
      } else {
        tr.onmouseover = function() {
          if (_currentRow) {
            move(this);
          }
        }
      }
      
      td = tr.insertCell(-1);
      td.style.cursor = 'move';
      elm = document.createElement('a');
      td.appendChild(document.createTextNode(((prefix == '') ? '' : prefix + ') ' ) + ((node.id != 0 && node.name == '') ? '' : node.name)));
      td.appendChild(elm);
      td.onmousedown = function() {
        _currentRow = tr;
        MyUtils.removeTableRows($('#pages')[0], 1);
        setRoot('', false);
      };
      
      td = tr.insertCell(-1);
      elm = document.createElement('img');
      elm.src = 'assets/imgs/edit.png';
      elm.title = 'Edit';
      elm.style.cursor = 'pointer';
      elm.style.marginLeft = '5px';
      elm._node = node;
      elm.onclick = function() {
        parent.location.href='http://<?php echo URL . "admin.php?i=$page_id&script=index_tag"; ?>&id=' + this._node.id;
      };
      td.appendChild(elm);

      elm = document.createElement('img');
      elm.src = 'assets/imgs/add16.png';
      elm.title = 'Add Subtag';
      elm.style.cursor = 'pointer';
      elm.style.marginLeft = '5px';
      elm._node = node;
      elm.onclick = function() {
        parent.location.href='http://<?php echo URL . "admin.php?i=$page_id&script=index_tag"; ?>&pid=' + this._node.id;
      };
      td.appendChild(elm);
      
      elm = document.createElement('img');
      elm.src = 'assets/imgs/delete24.png';
      elm.title = 'Delete';
      elm.style.cursor = 'pointer';
      elm.style.marginLeft = '5px';
      elm._node = node;
      elm.onclick = function() {
        r = window.confirm('Are You Sure?');
        if (!r) {
          return;
        }
        $.ajax({
          type: 'POST',
          url: '<?php echo basename(__FILE__, '.php'); ?>.server.php',
          data: 'action=remove&q=' + encodeURIComponent(JSON.stringify(this._node)),
          success: function(msg){
            location.reload();
          }
        });
      };
      td.appendChild(elm);
    } else if (node.id == 0 && node._children.length == 0) {
      tr = table.insertRow(-1);
      tr.className = 'none';
      td = tr.insertCell(-1);
      td.colSpan = 4;
      td.appendChild(document.createTextNode('None'));
    }
    for (var idx in node._children) {
      var obj = node._children[idx];
      _setRoot(obj, table, ((prefix == '') ? '(' : '\u2002' + prefix + '-' ) + (parseInt(idx, 10) + 1), is_child)
    }
  }

  function move(tr) {
    var params = PageUtils.getParams(_currentRow.rowIndex < tr.rowIndex, tr._node);
    _currentRow._node.parent_id = params.parent_id;
    _currentRow._node.order = params.order;
    PageUtils.update(_root);
    setRoot('', false);
  }

  function transform() {
    if (_threadId != 0) {
      clearTimeout(_threadId);
      _threadId = 0;
    }
    _options = [JSON.parse(JSON.stringify(_currentRow._node))];
    _travelOlders(_currentRow._node);
    _options.reverse();
    _count = _options.length - 1;
    var older = PageUtils.getOlder(_root, _currentRow._node);
    if (older) {
      _travelYounger(older, _options)
    }
    _threadId = setTimeout('_transform();', 1000);
    
  }

  function _transform() {
    if (_threadId != 0) {
      clearTimeout(_threadId);
      _threadId = 0;
    }
    if (_currentRow == null) {
      return;
    }
    _count++;
    _count = _count % _options.length;
    var option = _options[_count];
    _currentRow._node.parent_id = option.parent_id;
    _currentRow._node.order = option.order;
    PageUtils.update(_root);
    setRoot('', false);
    _threadId = setTimeout('_transform();', 1000);
  }

  function _travelOlders(node) {
    var younger = PageUtils.getYounger(_root, node);
    if (younger || node.parent_id == 0) {
      return;
    }
    var parent = PageUtils.getById(_root, node.parent_id);
    _options[_options.length] = PageUtils.getParams(1, parent)
    _travelOlders(parent);
  }
  
  function _travelYounger(node) {
    if (node._children.length == 0) {
      _options[_options.length] = {
        parent_id: node.id,
        order: 0
      }
      return;
    }
    var child = node._children[node._children.length - 1];
    _options[_options.length] = PageUtils.getParams(1, child)
    _travelYounger(child)
  }
</script>
</body>
</html>